<?php
use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
use kartik\file\FileInput;
use app\modules\Order\models\Order;
//use kartik\select2\Select2;

$order = Order::findOne($model->order_id);

$pass_data = array_merge(Yii::$app->params['area']['province_data'], Yii::$app->params['area']['country_data']);
?>
<style type="text/css">
	.order-customer-form { font-size:12px;padding-bottom:30px; }	
	.order-customer-form .form-group { margin-bottom:5px;}
	.order-customer-form .form-control {height:28px;}
	.none {display:none;}
	.show {display:block; padding:10px 0 0 10px;}
	.ui-widget.ui-widget-content {z-index:9999; /* 自动补全　在模态框下不显示 */ } 
</style>

<?=  yii\web\View::registerCssFile("/js/viewer.css",['depends' => 'app\assets\AppAsset']) ?>
<?=  yii\web\View::registerCssFile("/js/jquery-ui/jquery-ui.min.css",['depends' => 'app\assets\AppAsset']) ?>
<?=  yii\web\View::registerJsFile("/js/jquery-ui/jquery-ui.min.js",['depends' => 'app\assets\AppAsset']) ?>
<?=  yii\web\View::registerJsFile("/js/mask/jquery.mask.min.js",['depends' => 'app\assets\AppAsset']) ?>
<?=  yii\web\View::registerJsFile("/js/viewer.js",['depends' => 'app\assets\AppAsset']) ?>

<div class="order-customer-form row">
    <?php $form = ActiveForm::begin([
                                 'options' => ['enctype' => 'multipart/form-data',],
                                 'layout' => 'horizontal',
                                 'fieldConfig' => [
                                    'template' => "{label}\n{beginWrapper}\n{input}\n{hint}\n{error}\n{endWrapper}",
                                    'horizontalCssClasses' => [
                                        'label' => 'col-sm-4',
                                        'wrapper' => 'col-sm-8',
                                        'error' => '',
                                    ],
                                 ],
                            ]); ?>


	<div class="col-md-5">

    <?= $form->field($model, 'order_id')->label(false)->hiddenInput() ?>
	<?php $_time = $model->order->product->go_time; 

		  $go_time = date("Y-m-d",strtotime("+180 days",strtotime($_time)));
	?>
	<input type="hidden" id="go_time" value="<?= $go_time ?>" >
	<div class="form-group field-ordercustomer-first_name">
		<label class="control-label col-sm-4" for="ordercustomer-first_name">中文姓</label>
		<div class="col-sm-4">
			<input type="text" id="ordercustomer-first_name" class="form-control" name="OrderCustomer[first_name]" value="<?= $model->first_name ?>" maxlength="32">

			<div class="help-block help-block-error "></div>
		</div>
		<div class="col-sm-4">
			<input type="text" id="ordercustomer-en_first_name" class="form-control" name="OrderCustomer[en_first_name]" value="<?= $model->en_first_name ?>" >
			<div class="help-block help-block-error "></div>
		</div>
	</div>


	<div class="form-group field-ordercustomer-first_name">
		<label class="control-label col-sm-4" for="ordercustomer-last_name">中文名</label>
		<div class="col-sm-4">
			<input type="text" id="ordercustomer-last_name" class="form-control" name="OrderCustomer[last_name]" value="<?= $model->last_name ?>" maxlength="32">
			<div class="help-block help-block-error"></div>
		</div>
		<div class="col-sm-4">
			<input type="text" id="ordercustomer-en_last_name" class="form-control" name="OrderCustomer[en_last_name]" value="<?= $model->en_last_name ?>" >
			<div class="help-block help-block-error "></div>
		</div>
	</div>

	<?= $form->field($model, 'card')->textInput(['maxlength' => 18]) ?>

	<?= $form->field($model, 'gender')->inline(true)->radioList(\Yii::$app->params['gender']) ?>

	<div class="form-group field-ordercustomer-birthday">
		<label class="control-label col-sm-4" for="ordercustomer-birthday">出生日期</label>
		<div class="col-sm-8">
			<input name="OrderCustomer[birthday]" id="ordercustomer-birthday" placeholder="YYYYMMDD" class="simple-field-data-mask form-control" type="text" data-mask="0000-00-00"  value="<?= $model->birthday ?>"/>
		<div class="help-block help-block-error "></div>
		</div>
	</div>

    <!-- ?= $form->field($model, 'passport')->textInput(['maxlength' => true]) ? -->
	<div class="form-group field-ordercustomer-passport" style="margin-bottom:15px;">
		<label class="control-label col-sm-4" for="ordercustomer-passport">护照号码</label>
		<div class="col-sm-8">
			<input type="text" id="ordercustomer-passport" class="form-control" name="OrderCustomer[passport]" maxlength="32" value="<?= $model->passport ?>" >
			<div class="block-error "></div>
		</div>
	</div>


	<div class="form-group field-ordercustomer-native">
		<label class="control-label col-sm-4" for="ordercustomer-native">出生地</label>
		<div class="col-sm-8">
			<input name="OrderCustomer[native]" id="ordercustomer-native" class="form-control" type="text"   value="<?= $model->native ?>" />
			<div class="help-block help-block-error "></div>
		</div>
	</div>



	<div class="form-group field-ordercustomer-passport_add">
		<label class="control-label col-sm-4" for="ordercustomer-passport_add">护照签发地</label>
		<div class="col-sm-8">
			<input name="OrderCustomer[passport_add]" id="ordercustomer-passport_add" class="form-control" type="text"   value="<?= $model->passport_add ?>" />
			<div class="help-block help-block-error "></div>
		</div>
	</div>

	<div class="form-group field-ordercustomer-passport_grant">
		<label class="control-label col-sm-4" for="ordercustomer-passport_grant">护照签发日期</label>
		<div class="col-sm-8">

			<input name="OrderCustomer[passport_grant]" id="ordercustomer-passport_grant" placeholder="YYYYMMDD" class="simple-field-data-mask form-control" type="text" data-mask="0000-00-00" value="<?= $model->passport_grant ?>" />
		<div class="help-block help-block-error "></div>
		</div>
	</div>

	<div class="form-group field-ordercustomer-passport_date">
		<label class="control-label col-sm-4" for="ordercustomer-passport_date">护照有效期</label>
		<div class="col-sm-8">
			<input name="OrderCustomer[passport_date]" id="ordercustomer-passport_date" placeholder="YYYYMMDD" class="simple-field-data-mask form-control" type="text" data-mask="0000-00-00"  value="<?= $model->passport_date ?>"/>
		<div class="help-block help-block-error "></div>
		</div>
	</div>

	<div class="form-group field-ordercustomer-country">
		<label class="control-label col-sm-4" for="ordercustomer-country">国籍</label>
		<div class="col-sm-8">
			<input name="OrderCustomer[country]" id="ordercustomer-country" placeholder="国籍" class="form-control" type="text"   value="<?= $model->country ?>" />
			<div class="help-block help-block-error "></div>
		</div>
	</div>

	<div class="card card-color <?= ($model->country != '中国') ? "none" : "" ?>" >
    	<?= $form->field($model, 'card_address')->textInput(['maxlength' => 64]) ?>
    	<?= $form->field($model, 'nation')->textInput(['maxlength' => 32]) ?>
	</div>


    <?= $form->field($model, 'phone')->textInput(['maxlength' => true]) ?>
	</div>

	<div class="col-md-7">
		<div style="margin-top:15px;margin-bottom: 35px;">
			<button type="button" class="close pull-right" data-dismiss="modal" aria-label="Close" style="margin-right:15px;"><span aria-hidden="true">&times;</span></button>
		</div>	
			<!-- Nav tabs -->
		<!-- 	<ul class="nav nav-tabs" role="tablist">
				<li role="presentation" class="active">
					<a href="#home" aria-controls="home" role="tab" data-toggle="tab">护照</a>
				</li>
				<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">身份证</a></li>
			</ul> -->

			<!-- Tab panes -->
		<!-- 	<div class="tab-content">	
				<div role="tabpanel" class="tab-pane active" id="home"> -->
		<div class="row">			
    				<?= $form->field($model, 'passport_type')->inline(true)->radioList(\Yii::$app->params['passport_type']) ?>
    	</div>
		<div style="position:relative;margin: 15px 0;">
					<?php if($order->status != 4){ ?>
						<?= $form->field($model, 'passport_img')->label("")->widget(FileInput::classname(),
					   	 [
					   	 	'language' => 'zh',
					   	 	'options' => ['accept' => '', 'multiple'=>false],
							 	'pluginOptions' => [
							 		'showCaption' => false,
							 		'showRemove' => true,
							 		'showUpload' => false,
							 		'browseClass' => 'btn btn-info',
							 		'removeClass' => 'btn btn-danger',
							 		'browseLabel' =>  '上传护照',
							 		'removeLabel' =>  '删除'
							 ]
						 ]);
					?>
					<?php } ?>
					
					<?php if($model->passport_img){ ?>
						<div style="padding:15px;" id="viewer">
							<!-- a href="/</?= $model->passport_img ?>" target="_blank"></a -->
							<img src="/<?= $model->passport_img ?>" data-original="/<?= $model->passport_img ?>" id="galley" class="img-responsive img-thumbnail artZoom"  >
						</div>
					<?php } ?>

					<?php if($model->passport_check == 2){ ?> 
						<div style="margin-left:15px;color:red;font-size:24px;">
							<small>护照审核通过</small>
							<i class="fa fa-address-card" aria-hidden="true" title="护照审核通过标志"></i>
						</div>
					<?php } ?>
					</div>	
				
				<!-- </div> -->
				<!-- <div role="tabpanel" class="tab-pane" id="profile"> -->
					<div class="card <?= ($model->country != '中国') ? "none" : "" ?>" style="margin: 15px;">
					<?= $form->field($model, 'card_img')->label("")->widget(FileInput::classname(),
		   	 			[
		   	 				'language' => 'zh',
		   	 				'options' => ['accept' => '', 'multiple'=>false],
			 			    	'pluginOptions' => [
			 			    		'showCaption' => false,
			 			    		'showRemove' => true,
			 			    		'showUpload' => false,
			 			    		'browseClass' => 'btn btn-success',
			 			    		'removeClass' => 'btn btn-danger',
			 			    		'browseLabel' =>  '上传身份证或户口照片',
			 			    		'removeLabel' =>  '删除'
			 			    ]
			 			]);
					?>
					<?php if($model->card_img ){ ?>
					<div class="text-center">
						<!-- a href="/</?= $model->card_img ?>" target="_blank" -->
							<img src="/<?= $model->card_img ?>" data-original="/<?= $model->card_img ?>"  id="card-galley" style="max-height:380px;"  class="img-responsive img-thumbnail" >
						<!-- /a -->
					</div>
					<?php } ?>
					<!-- </div> -->
			<!-- 	</div> -->
			</div>

		<!-- </div> -->
	


	</div>


    <hr style="margin-top:0px;margin-bottom:5px;">

    <div class="col-md-12 text-center">
	<?php if($order->status != 4){ ?>
        <?= Html::submitButton($model->isNewRecord ? '添加客户' : '确认修改', ['class' =>  'col-md-2  col-md-offset-5 btn btn-success ']) ?>
	<?php } ?>
    </div>

    <?php ActiveForm::end(); ?>

</div>


<?php app\components\JsBlock::begin() ?>
<script type="text/javascript">
    $("#ordercustomer-first_name").change(function(){//{{{
		var name = $(this).val(); // 获取客户编号

		$.get("/order/customer/pinyin", {name:name}, function(data){
			if(data){
				$("#ordercustomer-en_first_name").val(data);
			}
		});
	});//}}}

    $("#ordercustomer-last_name").change(function(){//{{{
		var name = $(this).val();

		$.get("/order/customer/pinyin", {name:name}, function(data){
			if(data){
				$("#ordercustomer-en_last_name").val(data);
			}
		});
	});//}}}

	// 护照长度判断
    $("#ordercustomer-passport").change(function(){//{{{
		var name = $(this).val();
		
		console.log(name.length);
		if(name.length != 9){
			$(this).siblings(".block-error").text("护照长度不是 9 位");	
		}else{
			$(this).siblings(".block-error").text("");	
		}
	});//}}}

function isValidateDate(date) {//{{{
    date = $.trim(date);
    var reg = /^(\d{4})-(\d{2})-(\d{2})$/;
    reg.exec(date);
    if (!reg.test(date) && RegExp.$2 <= 12 && RegExp.$3 <= 31) {
            return false;
    }
    var year, month, day;
    year = parseInt(date.split("-")[0], 10);
    month = parseInt(date.split("-")[1], 10);
    day = parseInt(date.split("-")[2], 10);
	if(1996>year){
		return false;	
	}

    if (! ((1 <= month) && (12 >= month) && (31 >= day) && (1 <= day))) {
        return false;
    }
    if ((month <= 7) && ((month % 2) == 0) && (day >= 31)) {
        return false;
    }
    if ((month >= 8) && ((month % 2) == 1) && (day >= 31)) {
            return false;
    }
    if (month == 2) {
            if ((year % 400 == 0) || ((year % 4 == 0) && (year % 100 != 0))) {
  	           if (day > 29) {
  		               return false;
  		       }
  	      } else {
  		       if (day > 28) {
  			       return false;
  			   }
  		  }
    }
    return true;
}//}}}
	
	$("#ordercustomer-birthday").change(function(){
		 $("#ordercustomer-passport_grant").trigger('change');
	});

	// 护照日期自动赋值
    $("#ordercustomer-passport_grant").change(function(){//{{{
		var passport = $(this).val(); 
		var birthday = $("#ordercustomer-birthday").val();

		if(!passport){
			return false;
		}

		var ret = isValidateDate(passport);
		if(! ret){
			
			alert("抱歉，您输入的日期格式有误, 请仔细检查");
			return false;
		}
		// ordercustomer-passport_date
		$.get("/order/customer/passport", {passport:passport,birthday:birthday}, function(data){
			
			var go_date = $("#go_time").val();
			if(data < go_date){  //2017-11-27
				
				//alert("护照有效期距离起航时间不足180天");
				$("#ordercustomer-passport_date").siblings(".help-block-error").text("护照有效期距离起航时间不足180天");
			}else{
				$("#ordercustomer-passport_date").siblings(".help-block-error").text("");
			}

			var val = $("#ordercustomer-passport_date").val();
			if(data && (val != data)){
				$("#ordercustomer-passport_date").val(data);
			}
		});
	});//}}}

	// 国籍是否是中国
	$("#ordercustomer-country").bind("input propertychange change",function(event){
		var name = $(this).val();

		if(name == '中国'){
			$('.card').removeClass('none');                                     
			$('.card').addClass('show');                                        
		}else{
			$('.card').addClass('none');                                        
			$('.card').removeClass('show');                                     
		}
	});


	// 身份证信息自动填充赋值
    $("#ordercustomer-card").change(function(){
		var card = $(this).val(); // 获取身份证号
		//console.log(card);

		$.get("/order/customer/card", {card:card}, function(data){
			if(data){
				if(data.card_address){
					$("#ordercustomer-card_address").val(data.card_address);
				}
				//if(data.native){
				//	$("#ordercustomer-native").val(data.native);
				//}
				if(data.birthday){
					$("#ordercustomer-birthday").val(data.birthday);
				}
				if(data.gender){
					$("input[name='OrderCustomer[gender]']").prop("checked", false);
					$("input[name='OrderCustomer[gender]'][value="+data.gender+"]").prop("checked",true);
				}
			}
		})

	});

	// 护照签发地 自动补全
	var pass_data = [<?php foreach($pass_data as $pd){  echo '"'. $pd .'"' .  ',';} ?>];

	$("#ordercustomer-passport_add").autocomplete({
		source:pass_data 
	});

	// 国籍 自动补全
	var country = [<?php foreach(\Yii::$app->params['area']['country_data'] as $pd){  echo '"'. $pd .'"' .  ',';} ?>];

	$("#ordercustomer-country").autocomplete({
		source: country
	});

	// 出生地 自动补全
	var _native = [<?php foreach($pass_data as $pd){  echo '"'. $pd .'"' .  ',';} ?>];

	$("#ordercustomer-native").autocomplete({
		source: _native
	});


	// 护照
	var galley = document.getElementById('galley');
	if(galley ){
		var viewer;
		viewer = new Viewer(galley, {
			url: 'data-original',
			//inline: true,
			button: true,
		});
	}
	

	var card_galley = document.getElementById('card-galley');

	if(card_galley ){
		var viewer;
		viewer = new Viewer(card_galley, {
			url: 'data-original',
			//inline: true,
			button: true,
		});
	}

	// 护照预览
	$(".field-ordercustomer-passport_img").delegate(".file-preview-image","click",function(){
		var card_galley = $(this).get(0); //document.getElementById('');

		if(card_galley ){
			var viewer;
			viewer = new Viewer(card_galley, {
				url: 'data-original',
				//inline: true,
				button: true,
			});
		}
	});

	// 身份证预览
	$(".field-ordercustomer-card_img").delegate(".file-preview-image", "click", function(){
		var c_galley = $(this).get(0); //document.getElementById('');

		if(c_galley ){
			var viewer;
			viewer = new Viewer(c_galley, {
				url: 'data-original',
				//inline: true,
				button: true,
			});
		}
	});

</script>
<?php app\components\JsBlock::end() ?>

